<template>
    <table style="width:98%;margin-top:3%;border: 1px solid black;">
        <tr>
            <td colspan="3">
            <div class="cc-header">
                <dv-decoration-1 style="width:30%;height:50px;" />
                <div>今日数据</div>
                <dv-decoration-1 style="width:30%;height:50px;" />
            </div>
            </td>
        </tr>
        <tr style="height:50px;">
            <td>
            <p class="ml-3 fw-b" style="font-size:15pt">项目完成数据</p>
            </td>
            <td>
            <p class="ml-3 fw-b" style="font-size:15pt">项目问题数据</p>
            </td>
            <td>
            <p class="ml-3 fw-b" style="font-size:15pt">尚未解决的A类数据</p>
            </td>
        </tr>
        <tr>
            <td>
            <p class="ml-3 colorBlue fw-b">已完成项目书</p>
            <div>
                <dv-digital-flop :config="number1" style="width:1.25rem;height:.625rem;" />
            </div>

            </td>
            <td>
            <p class="ml-3 colorBlue fw-b">发现的问题总数</p>
            <div>
                <dv-digital-flop :config="number2" style="width:100px;height:50px;" />
                <dv-digital-flop :config="number3" style="width:100px;height:50px;" />
                <dv-digital-flop :config="number4" style="width:100px;height:50px;" />
            </div>
            </td>
            <td rowspan="3">
            <div class="ranking bg-color-black">
            <span style="color:#5cd9e8">
                <icon name="align-left"></icon>
            </span>
            <span class="fs-xl text mx-2 mb-1">问题</span>
            <dv-scroll-ranking-board :config="ranking" style="height:2.75rem" />
            </div>
            </td>
        </tr>
        <tr>
            <td>
            <p class="ml-3 colorBlue fw-b">已完成项目书</p>
            <div>
                <dv-digital-flop :config="number1" style="width:1.25rem;height:.625rem;" />
            </div>

            </td>
            <td>
            <p class="ml-3 colorBlue fw-b">发现的问题总数</p>
            <div>
                <dv-digital-flop :config="number1" style="width:1.25rem;height:.625rem;" />
            </div>
            </td>
        </tr>
        <tr>
            <td>
            <p class="ml-3 colorBlue fw-b">已完成项目书</p>
            <div>
                <dv-digital-flop :config="number1" style="width:1.25rem;height:.625rem;" />
            </div>

            </td>
            <td>
            <p class="ml-3 colorBlue fw-b">发现的问题总数</p>
            <div>
                <dv-digital-flop :config="number1" style="width:1.25rem;height:.625rem;" />
            </div>
            </td>
        </tr>
    </table>
</template>
<script>
export default {
    data(){
        return{
            number1: {
                number: [100],
                content: '{nt}个'
            },
            number2: {
                number: [10],
                content: 'A:{nt}个'
            },
            number3: {
                number: [40],
                content: 'B:{nt}个'
            },
            number4: {
                number: [20],
                content: 'C:{nt}个'
            },
            ranking: {
                data: [
                {
                    name: "通信设备着火问题",
                    value: 55
                },
                {
                    name: "房建设备期货问题",
                    value: 120
                },
                {
                    name: "机电设备进水问题",
                    value: 78
                }
                ],
                carousel: "single",
                unit: "小时"
            },
        }
    }
}
</script>
<style lang="scss" scoped>
.cc-header {
    height: 70px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 30px;
  }
  table, td, th
    {
        border:1px solid black;
        vertical-align:top;
    }
</style>